<template>
    <div>
        <div class="state-title">
            <label><span>*</span>标题</label>
            <el-input
                    type="text"
                    placeholder="请输入内容"
                    v-model="nowItem.clause_title"
                    maxlength="20"
                    show-word-limit
            ></el-input>
            <el-button type="primary" @click="saveVuex" v-if="false">存到草稿箱</el-button>
            <el-button type="primary" @click="saveServe" >发布</el-button>
        </div>
        <div id="vueeditor">

            <vue-editor v-model="nowItem.clause_text"
                        ref="sysEditor"
                        @blur="onEditorBlur"
                        @focus="onEditorFocus"
                        @selection-change="onSelectionChange"
                        @text-change="textChange"

            ></vue-editor>
<!--            <span class="text-limit">当前字数{{contentlength}}/5000字</span>-->
        </div>
        <el-button type="primary" @click="saveServe">发布</el-button>
    </div>
</template>

<script>

    import { VueEditor } from 'vue2-editor'

    export default {
        name: "StatementInput",
        props:['statetype'],
        components: {
            VueEditor
        },
        data() {
            return {

                nowItem:{

                },
                contentlength:0,
                stateContent:[],
            }
        },
        computed:{
        /*    comlength(){
                console.log('~~~~~~~~~~~~~~~~~~~~~')
                console.log(this.$refs.ue)
                let leng=this.$refs.ue.$refs.quillContainer.innerText.replace(/[\r\n]/g,"").length
                return leng
            },*/
        },
       methods:{
           textChange(delta, oldDelta, source){
             /*  console.log(delta)
               console.log(oldDelta)
               console.log(source)*/
           },
           onEditorBlur(quill){
               // console.log(quill)
           },
           onEditorFocus(quill){
               // console.log(quill)
           },
           onSelectionChange(range, oldRange, source){
             /*  console.log(range)
               console.log(oldRange)
               console.log(source)*/

               /* event.quill.deleteText(5000,4)
               if (this.nowItem.clause_text===''){
                   this.contentlength=0;
               }else this.contentlength=event.quill.getLength()-1*/
           },
         /*  alertValue(e,strValue,decimalNum){
               e.quill.deleteText(decimalNum,1,strValue);//保留 strValue 的 前 decimalNum 位字符，
           },*/
//缓存
           saveVuex(){

               this.$store.dispatch('saveContentAct',this.stateContent)
               // console.log(this.$store.state.StatementNum.stateContent)
           },
           saveServe(){

               // console.log('保存到服务器')
               // console.log(this.nowItem);
               if (0){
                   this.$message.error("字数超长");
                   return;
               }
               else {
                   // console.log('字数正确')
                   this.axios({
                       url:'/clause/updateClause',
                       method:'post',
                       data:this.nowItem
                   }).then(data=>{
                       // console.log(`存储条款数据${this.statetype}`)
                       // console.log(data)
                       if (data.data.code===200){
                           this.$message({
                               type: "success",
                               message: data.data.msg,
                           });
                           this.saveVuex()
                       }

                   })
               }

           },
           getIdContent(id){
               // console.log(id)
               // console.log(typeof id)
               this.axios({
                   url:'/clause/selectClause',
                   method:'get',

               }).then(data=>{
                   // console.log(`获取条款数据${this.statetype}`)
                   // console.log(data)
                   if (data.data.code===200){
                       this.stateContent=data.data.data
                       this.nowItem={...this.stateContent[this.statetype-1]}
                       /*
                       this.saveVuex()*/
                   }

               })
           }
       },
      /*  watch:{
            statetype(){
                console.log('切换了')
                this.saveVuex()
            }
        },*/
        created() {

            this.getIdContent(this.statetype)

        }
    }
</script>

<style lang="less">
.state-title{
    margin:20px 0;
    >label{
        display: inline-block;
        margin-right: 20px;
        span{
            color: red;
            margin-right: 4px;
        }
    }

    .el-input{
        width: 40%;
    }
    .el-button{
        margin-left: 20px;
        color: white;
    }
}
    #vueeditor{
        position: relative;
        width: 80%;
        border: 1px solid white;
        .quillWrapper{
            border: 1px solid white;
        }
    }
    .text-limit{
        position: absolute;
        z-index: 2;
        right: 10px;
        top:10px;
        color: #bbbbbb;
    }
</style>